{% extends 'base.html' %}

{% block title %}
    乾颐堂图表测试
{% endblock title %}

{% block js %}
    <!-- 加载Chart.js的JS文件 -->
    <!-- 最新的Chart JS 文件 https://cdnjs.com/libraries/Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <!-- 加载本项目创建的chart_json_functions.js的JS文件-->
    {% load static %}
    <script src="{% static "js/chart_json_functions.js" %}"></script>
    <!-- 加载ajax的JS文件-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% endblock js %}

{% block body %}
    <div class="container-fluid">
    <div class="jumbotron">
      <h1 style="color: #666666">乾颐堂图表测试</h1>
      <p>乾颐堂现任明教教主Python网络编程第二部分HTTP协议图表测试</p>
    </div>


     <div class="row">
        <div class="col-sm-6">

            <div class="card">

                <div class="card-header">线性图表测试(JSON刷新数据)

                </div>
                <div class="card-body">
                     <!-- 让客户选择图表类型 -->
                    <select id="charttype1">
                     <option value="line" selected="selected">line</option>
                     <option value="bar">bar</option>
                    </select>
                    <!-- 让客户选择刷新周期 -->
                    <select id="interval1">
                     <option value="None" selected="selected">不刷新</option>
                     <option value="10000">10秒</option>
                     <option value="20000">20秒</option>
                     <option value="30000">30秒</option>
                    </select>
                    <!-- 点击按钮,调用json_chart1函数(位于chart_json_functions.js),从URL获取数据,并绘制图表-->
                    <button onClick="json_chart1();">开始图表</button>

                    <!-- 图表会被绘制在下面的canvas内 -->
                    <canvas id="chart1"></canvas>
                </div>
            </div>

        </div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">柱状图表测试(JSON刷新数据)</div>
                <div class="card-body">
                     <!-- 让客户选择图表类型 -->
                    <select id="charttype2">
                     <option value="line" selected="selected">line</option>
                     <option value="bar">bar</option>
                    </select>
                    <!-- 让客户选择刷新周期 -->
                    <select id="interval2">
                     <option value="None" selected="selected">不刷新</option>
                     <option value="10000">10秒</option>
                     <option value="20000">20秒</option>
                     <option value="30000">30秒</option>
                    </select>
                    <!-- 点击按钮,调用json_chart2函数(位于chart_json_functions.js),从URL获取数据,并绘制图表-->
                    <button onClick="json_chart2();">开始图表</button>

                    <!-- 图表会被绘制在下面的canvas内 -->
                    <canvas id="chart2"></canvas>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" language="javascript">
    <!-- 下面的任务是提供一个初始化的图表展示,如果没有这个部分,默认图表内容为空白 -->
    get_json_render_chart('/chartjson/line/1/', "chart1", "line", "CPU利用率");
    get_json_render_chart('/chartjson/bar/2/', "chart2", "bar","MEM利用率");
</script>



<div class="row py-2">
    <div class="col-md-4 py-1">
        <div class="card">
            <div class="card-header">饼状图表测试1</div>
            <div class="card-body">
                <canvas id="chDonut1" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4 py-1">
        <div class="card">
            <div class="card-header">饼状图表测试2</div>
            <div class="card-body">
                <canvas id="chDonut2" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4 py-1">
        <div class="card">
            <div class="card-header">饼状图表测试2</div>
            <div class="card-body">
                <canvas id="chDonut3" height="100"></canvas>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" language="javascript">
    // 通过URL获取JSON数据,并且渲染饼状图
    get_json_render_chart('/chartjson/pie/3/', "chDonut1", "pie");
    get_json_render_chart('/chartjson/pie/4/', "chDonut2", "pie");
    get_json_render_chart('/chartjson/pie/5/', "chDonut3", "pie");
</script>


{% endblock body %}
